<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Test Navview - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        body {
            padding-top: 50px;
        }
    </style>
</head>
<body class="cloak flex-center">
<nav data-role="appbar">
    <span class="app-bar-item-static">Navview</span>
    <div class="app-bar-item-static">
        <input type="checkbox" data-role="theme-switcher" data-state="light"/>
    </div>
</nav>

    <div class="example" style="height: calc(100vh - 50px)">
        <div id="navview" data-role="navview" data-save-state="true" data-expand-point="lg" data-toggle="#pane-toggle" data-active-state="true">
            <nav class="navview-pane">
                <button class="pull-button">
                    <span class="mif-menu"></span>
                </button>

                <div class="suggest-box">
                    <input type="text" data-role="input" data-clear-button="false" data-search-button="true">
                    <button class="holder">
                        <span class="mif-search"></span>
                    </button>
                </div>

                <ul class="navview-menu">
                    <li>
                        <a href="#">
                            <span class="icon"><span class="mif-home"></span></span>
                            <span class="caption">Home</span>
                        </a>
                    </li>

                    <li class="item-separator"></li>

                    <li class="item-header">Main pages</li>

                    <li>
                        <a href="#">
                            <span class="icon"><span class="mif-apps"></span></span>
                            <span class="caption">Apps</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <span class="icon"><span class="mif-gamepad"></span></span>
                            <span class="caption">Games</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon"><span class="mif-envelop"></span></span>
                            <span class="caption">Email</span>
                            <div class="badges">
                                <span class="badge inline">10</span>
                                <span class="badge inline">5</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle">
                            <span class="icon"><span class="mif-music"></span></span>
                            <span class="caption">Music</span>
                        </a>
                        <ul data-role="dropdown">
                            <li>
                                <a href="#">
                                    <span class="icon"><span class="mif-gamepad"></span></span>
                                    <span class="caption">Games</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="icon"><span class="mif-film"></span></span>
                                    <span class="caption">Movies</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="disabled">
                        <a href="#">
                            <span class="icon"><span class="mif-images"></span></span>
                            <span class="caption">Images</span>
                        </a>
                    </li>

                    <li class="item-separator"></li>

                    <li>
                        <a href="#">
                            <span class="icon"><span class="mif-folder"></span></span>
                            <span class="caption">Documents</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="navview-content pl-4-md pr-4-md">
                <h1>
                    <button id="pane-toggle" class="button square d-none-md"><span class="mif-menu" ></span></button>
                    What is?
                </h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>
                <button onclick="Metro.getPlugin('#navview', 'navview').toggle(this)" class="button">Close menu</button>

            </div>
        </div>
    </div>

<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
